<template>
  <div class='shop-view ft14'>
    <header>店铺总览</header>
    <div class="head">
      <div v-for="(item, index) in modelData" :key="index">
        <p class="mb20 ft12"><span>{{item.label}}</span> <span class="iconfont icon-gengduo_huaban-copy"></span></p>
        <p :class="item.class">{{info[item.prop]}}</p>
      </div>
    </div>
    <Chart :data='info.list' />
  </div>
</template>
<script>
import Chart from './chart.vue'
export default {
  components: {Chart},
  name: "",
  data() {
    return {
      modelData:[
        {prop:"dayCount",label:"今日求购数",class:"color-blue"},
        {prop:"dayVolume",label:"今日成交数",class:"color-red"},
        {prop:"totleCount",label:"历史求购数",class:"color-blue"},
        {prop:"totleVolume",label:"历史成交数",class:"color-red"},
      ],
      info:{
        list:[]
      }
    };
  },
  methods: {

    init(){
      _g.apiPost('merchantPandect/getNumbers.do').then(res=>{
        this.info=res.data
      })
    }
  },
  created() {
    this.init()
  }
};
</script>
<style lang="scss" scoped>
.shop-view {
  background-color: #f2f2f2;
  header{
    line-height: 50px;
    text-indent: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    background-color: #fff;
  }
   .head{
    display: flex;
    justify-content: space-between;
    margin: 20px 0;

    >div{
      width: calc(25% - 25px);
      background-color: #fff;
      border-radius: 4px;
      padding: 45px 50px;
      box-sizing: border-box;
      text-align: center;

      .iconfont{
        font-size: 12px;
        margin-left: 5px;
        color: #ccc;
      }

      >p:nth-child(2){
        font-size: 24px;
      }
    }
  }
}
</style>